<template>
  <div class="zongbox">
    <div class="dakabox">
      <div class="daka">今日打卡</div>
      <div class="head-img">
        <img :src="userData.img" alt />
      </div>
      <div class="MG">
        <span>
          MG.3
          <progress-bar type="line" ref="line" :options="options"></progress-bar>
        </span>
        <p>在线锻炼100分钟可升级为MG.4</p>
      </div>
    </div>
    <div class="share">
      <h5>总运动</h5>
      <span class="icon iconfont icon-fenxiang"></span>
      <div class="jindu">
        <div class="cricle">
          <progress-bar type="circle" ref="circle"  class="progress" :options="optiones"></progress-bar>
          <div class="min">
            <p class="num">2779</p>
            <p>分钟</p>
          </div>
        </div>
        <div class="tian">打卡41天</div>
      </div>
      <div class="benzhou">
        <div class="time">
          <span>本周运动分钟(分钟)</span>
          <p>85</p>
        </div>
        <div class="paiming">
          <span>本周好友运动排名</span>
          <p>16</p>
        </div>
      </div>
    </div>
    <div class="tuijian">
      <h5>推荐活动</h5>
      <ul>
        <li v-for="(item,index) in home" :key="index">
          <img :src="item.img" alt />
        </li>
      </ul>
    </div>
    <div class="kong"></div>
  </div>
</template>

<script>
export default {
  components: {},
  prop: ["text"],
  data() {
    return {
      userData: {},
      home: [],
      options: {
        color: "#333",
        strokeWidth: 1,
        trailColor: "#fff",
        trailWidth: 1,
        duration: 3000
      },
      optiones: {
        color: "#333",
        strokeWidth: 3,
        trailColor: "#333",
        trailWidth: 2,
        alignToBottom: true,
        autoStyleContainer: true,
        style: {
          // Text color.
          // Default: same as stroke color (options.color)
          color: "#333",
          position: "absolute",
          left: "0%",
          top: "0%",
          padding: 0,
          margin: 0,
          // You can specify styles which will be browser prefixed
          transform: {
            prefix: true,
            value: "translate(0%, 0%)"
          }
        },
        duration: 3000
      }
    };
  },
  mounted() {
    this.$refs.line.animate(0.75);
    this.$refs.circle.animate(0.3, {
      step: function(state, circle, attachment) {
        // console.log(111,state,circle);

        circle.path.setAttribute("stroke", "rgb(254, 217, 6)");
      }
    });

    this.api.GetUser().then(res => {
      // console.log(res.data.userData.img);
      if (res.data.success) {
        this.userData = res.data.userData;
      }
    });
    this.api.GetHome().then(res => {
      // console.log(res.data.Home);
      this.home = res.data.Home;
    });
  }
};
</script>

<style lang="less" scoped>
.zongbox {
  height: 100%;
  background: rgb(239, 239, 239);
  .dakabox {
    width: 100%;
    height: 1.5rem;
    background: rgb(254, 217, 6);
    overflow: hidden;
    .daka {
      padding: 0.05rem 0.2rem 0.05rem 0.2rem;
      margin-top: 0.4rem;
      margin-left: 0.3rem;
      color: rgb(254, 217, 6);
      text-align: center;
      font-size: 0.25rem;
      line-height: 0.5rem;
      width: 1rem;
      height: 0.5rem;
      background: #222;
      border-radius: 25px;
      float: left;
    }
    .head-img {
      width: 1rem;
      height: 1rem;
      border-radius: 100%;
      float: left;
      overflow: hidden;
      margin-left: 0.5rem;
      margin-top: 0.3rem;
      img {
        width: 100%;
      }
    }
    .MG {
      float: left;
      width: 4rem;
      height: 1rem;
      margin-left: 0.2rem;
      margin-top: 0.3rem;
      font-size: 0.33rem;
      font-weight: 500;
     
      p {
        margin-left: 1rem;
        margin-top: 0.1rem;
        font-size: 0.2rem;
      }
    }
  }
  .share {
    font-size: 0.5rem;
    height: 4.8rem;
    background: #fff;
    overflow: hidden;
    h5 {
      margin-left: 0.2rem;
      margin-top: 0.2rem;
      font-weight: 400;
    }
    span {
      float: right;
      margin-top: -0.5rem;
      margin-right: 0.5rem;
    }
    .jindu {
      position: relative;
      .cricle {
        font-size: 0.4rem;
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 100%;
        position: absolute;
        right: 2.5rem;
        text-align: center;
         .progress{
        transform:rotate(-140deg)
      }
        .min {
          position: relative;
          top: -2rem;
          margin-top: 0.3rem;
          .num {
            font-size: 0.6rem;
          }
        }
      }
      .tian {
        font-size: 0.3rem;
        text-align: center;
        line-height: 0.4rem;
        width: 1.7rem;
        height: 0.5rem;
        background: #fff;
        position: absolute;
        top: 2.1rem;
        left: 2.9rem;
      }
    }
    .benzhou {
      margin-top: 3.5rem;
      font-size: 0.28rem;
      line-height: 0.5rem;
      text-align: center;
      font-weight: 500;
      .time {
        width: 50%;
        height: 1rem;
        float: left;
      }
      .paiming {
        width: 50%;
        height: 1rem;
        float: left;
      }
    }
  }
  .tuijian {
    font-size: 0.5rem;
    width: 100%;
    margin-top: 0.3rem;
    background: #fff;
    overflow: hidden;
    h5 {
      margin-left: 0.2rem;
      margin-top: 0.2rem;
      font-weight: 400;
    }
    li {
      width: 95%;
      height: 3rem;
      margin: 0.2rem auto;
      margin-bottom: 0.5rem;
      img {
        width: 100%;
      }
    }
  }
  .kong {
    height: 1.2rem;
  }
}
</style>